﻿.fui-Switch {
    align-items: flex-start;
    box-sizing: border-box;
    display: inline-flex;
    position: relative;
}

.fui-Switch__input {
    top: 0px;
    left: 0px;
    box-sizing: border-box;
    cursor: pointer;
    height: 100%;
    margin: 0px;
    opacity: 0;
    position: absolute;
    width: calc(40px + 2 * var(--spacingHorizontalS));

    &:disabled {
        cursor: default;

        &:not(:checked) ~ .fui-Switch__indicator {
            border-color: var(--colorNeutralStrokeDisabled);
        }

        ~ .fui-Switch__indicator {
            color: var(--colorNeutralForegroundDisabled);
        }

        ~ .fui-Switch__label {
            cursor: default;
            color: var(--colorNeutralForegroundDisabled);
        }
    }

    &:enabled {
        &:not(:checked) {
            ~ .fui-Switch__indicator {
                color: var(--colorNeutralStrokeAccessible);
                border-color: var(--colorNeutralStrokeAccessible);
            }

            ~ .fui-Switch__label {
                color: var(--colorNeutralForeground1);
            }

            &:hover ~ .fui-Switch__indicator {
                color: var(--colorNeutralStrokeAccessibleHover);
                border-color: var(--colorNeutralStrokeAccessibleHover);
            }
        }

        &:checked {
            ~ .fui-Switch__indicator {
                background-color: var(--colorCompoundBrandBackground);
                color: var(--colorNeutralForegroundInverted);
                border-color: var(--colorTransparentStroke);
            }

            &:hover ~ .fui-Switch__indicator {
                background-color: var(--colorCompoundBrandBackgroundHover);
                border-color: var(--colorTransparentStrokeInteractive);
            }

            &.fui-Switch__input-secondary {
                ~ .fui-Switch__indicator {
                    background-color: var(--colorNeutralBackground3);
                }

                &:hover ~ .fui-Switch__indicator {
                    background-color: var(--colorNeutralBackground3Hover);
                }
            }

            &.fui-Switch__input-success {
                ~ .fui-Switch__indicator {
                    background-color: var(--colorStatusSuccessBackground3);
                }

                &:hover ~ .fui-Switch__indicator {
                    background-color: var(--colorStatusSuccessForeground1);
                }
            }

            &.fui-Switch__input-danger {
                ~ .fui-Switch__indicator {
                    background-color: var(--colorStatusDangerBackground3);
                }

                &:hover ~ .fui-Switch__indicator {
                    background-color: var(--colorStatusDangerForeground1);
                }
            }

            &.fui-Switch__input-warning {
                ~ .fui-Switch__indicator {
                    background-color: var(--colorPaletteMarigoldBackground3);
                }

                &:hover ~ .fui-Switch__indicator {
                    background-color: var(--colorPaletteMarigoldForeground1);
                }
            }

            &.fui-Switch__input-info {
                ~ .fui-Switch__indicator {
                    background-color: var(--colorNeutralForeground3);
                }

                &:hover ~ .fui-Switch__indicator {
                    background-color: var(--colorNeutralForeground3Hover);
                }
            }

            &.fui-Switch__input-light {
                ~ .fui-Switch__indicator {
                    background-color: var(--colorNeutralBackground2);
                }

                &:hover ~ .fui-Switch__indicator {
                    background-color: var(--colorNeutralBackground2Hover);
                }
            }

            &.fui-Switch__input-dark {
                ~ .fui-Switch__indicator {
                    background-color: var(--colorNeutralForeground1);
                }

                &:hover ~ .fui-Switch__indicator {
                    background-color: var(--colorNeutralForeground2);
                }
            }

            &.fui-Switch__input-link {
                ~ .fui-Switch__indicator {
                    background-color: var(--colorBrandForegroundLink);
                }

                &:hover ~ .fui-Switch__indicator {
                    background-color: var(--colorBrandForegroundLinkHover);
                }
            }
        }
    }

    &:checked {
        ~ .fui-Switch__indicator {

            > * {
                transform: translateX(20px);
            }
        }

        &.fui-Switch__input-xs {
            ~ .fui-Switch__indicator {
                > * {
                    transform: translateX(14px);
                }
            }
        }

        &.fui-Switch__input-sm {
            ~ .fui-Switch__indicator {
                > * {
                    transform: translateX(16px);
                }
            }
        }

        &.fui-Switch__input-md {
            ~ .fui-Switch__indicator {
                > * {
                    transform: translateX(22px);
                }
            }
        }

        &.fui-Switch__input-lg {
            ~ .fui-Switch__indicator {
                > * {
                    transform: translateX(24px);
                }
            }
        }

        &.fui-Switch__input-xl{
            ~ .fui-Switch__indicator {
                > * {
                    transform: translateX(28px);
                }
            }
        }
    }

    ~ .fui-Switch__indicator {
        border-radius: var(--borderRadiusCircular);
        border: 1px solid;
        line-height: 0;
        box-sizing: border-box;
        fill: currentcolor;
        flex-shrink: 0;
        font-size: 18px;
        height: 20px;
        margin: var(--spacingVerticalS) var(--spacingHorizontalS);
        pointer-events: none;
        transition-duration: var(--durationNormal);
        transition-timing-function: var(--curveEasyEase);
        transition-property: background, border, color;
        width: 40px;

        .fui-Switch__indicator__icon {
            display: inline;
            line-height: 0;
            transition-duration: var(--durationNormal);
            transition-timing-function: var(--curveEasyEase);
            transition-property: transform;
        }
    }

    ~ .fui-Switch__label {
        padding-bottom: var(--spacingVerticalS);
        padding-top: var(--spacingVerticalS);
        margin-top: calc((20px - var(--lineHeightBase300)) / 2);
        margin-bottom: calc((20px - var(--lineHeightBase300)) / 2);
        cursor: pointer;
        padding-right: var(--spacingHorizontalS);
        line-height: var(--lineHeightBase300);
        font-size: var(--fontSizeBase300);
        font-family: var(--fontFamilyBase);
        color: var(--colorNeutralForeground1);
    }

    &.fui-Switch__input-xs {
        ~ .fui-Switch__indicator {
            width: 28px;
            height: 14px;
            font-size: 12px;

            + .fui-Switch__label {
                padding-bottom: var(--spacingVerticalXS);
                padding-top: var(--spacingVerticalXS);
            }
        }
    }

    &.fui-Switch__input-sm {
        ~ .fui-Switch__indicator {
            width: 32px;
            height: 16px;
            font-size: 14px;

            + .fui-Switch__label {
                padding-bottom: var(--spacingVerticalSNudge);
                padding-top: var(--spacingVerticalSNudge);
            }
        }
    }

    &.fui-Switch__input-md {
        ~ .fui-Switch__indicator {
            width: 44px;
            height: 22px;
            font-size: 20px;
        }
    }

    &.fui-Switch__input-lg {
        ~ .fui-Switch__indicator {
            width: 48px;
            height: 24px;
            font-size: 22px;

            + .fui-Switch__label {
                padding-bottom: var(--spacingVerticalMNudge);
                padding-top: var(--spacingVerticalMNudge);
            }
        }
    }

    &.fui-Switch__input-xl {
        ~ .fui-Switch__indicator {
            width: 56px;
            height: 28px;
            font-size: 26px;

            ~ .fui-Switch__label {
                padding-bottom: var(--spacingVerticalM);
                padding-top: var(--spacingVerticalM);
            }
        }
    }
}
